<template>
  <div :class="['todo-item',todo.completed? 'completed':'']"
       @mouseleave="mouseLeave" @mouseenter="mouseEntry">
    <input
      type="checkbox"
      class="toggle"
      v-model="todo.completed"
      @click="itemClick(todo)"
    >
    <label class="content" v-show="!modify" @click="changetoModify">{{todo.content}}</label>
    <Input v-show="modify" v-model="updateContent" type="textarea" :autosize="true" class="content modifyinput"/>
    <button v-show="!modify&showIcon" class="destroy" @click="deleteTodo"></button>
    <button v-show="modify&showIcon" class="modify" @click="modifyContent(todo)"></button>

  </div>
</template>

<script>
  export default {
    props: {
      todo: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        token: '',
        userid: "",
        modify: false,
        showIcon: false,
        updateContent: ''
      }
    },
    methods: {
      deleteTodo() {
        if (!this.modify) {
          this.$emit('del', this.todo.id)
        } else {
//          this.$emit('modify', this.todo)
          this.modifyContent(this.todo)
        }
      },
      itemClick(todo) {
        this.$emit('itemClick', todo)
      },
      modifyContent(todo) {
        var vm = this;
        this.$http.post('/v1/users/updateTodo', {
          token: this.token,
          userId: this.userid,
          todoId: todo.id,
          content: this.updateContent
        }).then(function (response) {
          //修改后改变状态
          vm.modify = false
          if (response.data.code === 1000) {
            vm.todo.content = vm.updateContent
          } else {
            vm.$Message.error(response.data.message)
          }
        }).catch(function (e) {
          alert(e.message)
          //修改后改变状态
          vm.modify = false
        })


      },
      changetoModify() {
        this.modify = true
      },
      mouseEntry() {
        this.showIcon = true
      },
      mouseLeave() {
        this.showIcon = false;
//        this.modify = false
      }
    },
    created() {
      this.updateContent = this.todo.content
      var userInfo = JSON.parse(localStorage.getItem("userInfo"))
      this.token = userInfo.token
      this.userid = userInfo.userId
    }
  }
</script>

<style lang="stylus" scoped>
  .todo-item
    position relative
    background #ffffff
    font-size 24px
    display flex
    border-bottom 1px solid rgba(0, 0, 0, .06)

  .toggle
    text-align center
    width 40px
    height 40px
    margin auto 0
    border none
    outline none
    appearance none
    &:before
      content: url('../assets/round.svg')
      cursor pointer
    &:checked:before
      content: url('../assets/done.svg')
      cursor pointer

  .content
    flex 1
    margin-left 8px
    white-space pre-line
    word-break break-all
    display block
    transition color 0.4s
    margin-top 8px
    margin-bottom 8px

  &.completed {
    label
    color #d9d9d9
    text-decoration line-through
  }

  .modifyinput {
    padding 2px
  }

  .destroy
    right 10px
    bottom 0;
    width 24px
    height 24px
    margin auto 0;
    margin-right 10px
    margin-left 8px
    transition: color 0.2s east-out
    border-width 0
    cursor pointer
    background none
    background-image url("../assets/delete.png")
    background-size 20px 20px
    background-repeat no-repeat
    text-align center

  .modify
    right 10px
    bottom 0;
    width 24px
    height 24px
    margin auto 0;
    margin-right 10px
    margin-left 8px
    transition: color 0.2s east-out
    border-width 0
    background none
    cursor pointer
    background-image url("../assets/complete.png")
    background-size 20px 20px
    background-repeat no-repeat
    text-align center

</style>

